<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>广州桦霖气体有限公司 - 首页</title>
  <link rel="stylesheet" href="assets/css/common.css">
  <link rel="stylesheet" href="assets/css/home.css">
  <script src="assets/js/common.js"></script>
</head>
<body>
  <header id="header"></header>

  <main>
    <section class="hero">
      <div class="container hero-content">
        <h1>专业工业气体供应商</h1>
        <p>食品级 / 工业级 / 标准级 / 高纯气体一站式解决方案</p>
        <a href="products.html" class="btn">查看产品</a>
      </div>
    </section>

    <section class="section">
      <div class="container">
        <h2 class="section-title">服务内容</h2>
        <div class="service-grid">
          <div class="service-card">
            <div class="service-icon">🏭</div>
            <h3>工厂直销 · 货源充足</h3>
            <p>自有深冷空分、CO₂回收、水电解制氢多套装置，日产能：液氧 200 吨、液氮 300 吨、食品级 CO₂ 150 吨、高纯氢 8000 m³，储罐总容量 8000 吨，确保旺季不断供。</p>
            <ul class="service-list">
              <li>24 小时连续生产，库存实时监控</li>
              <li>旺季提前预警，滚动调度</li>
              <li>珠三角 4 小时、全国 48 小时到货</li>
            </ul>
          </div>

          <div class="service-card">
            <div class="service-icon">💰</div>
            <h3>价格优惠 · 透明公道</h3>
            <p>厂家直供，无中间环节；根据用量阶梯定价，月度用量≥100 瓶即可享受协议价，提供 13% 增值税专票，可签年度框架锁价。</p>
            <ul class="service-list">
              <li>量大从优，阶梯折扣最高 8%</li>
              <li>框架合同，锁价 12 个月</li>
              <li>月度对账，账期 30 天</li>
            </ul>
          </div>

          <div class="service-card">
            <div class="service-icon">🚚</div>
            <h3>全国配送 · 快速响应</h3>
            <p>广州、佛山自有危险品车队 42 辆（栏板/厢式/槽车），均安装 GPS + 视频监控，司机持证上岗；与多家物流平台合作，全国 2000+ 城市可到。</p>
            <ul class="service-list">
              <li>广州佛山 4 小时送货上门</li>
              <li>珠三角次日达，全国 48h</li>
              <li>提供装卸、回收空瓶一条龙</li>
            </ul>
          </div>

          <div class="service-card">
            <div class="service-icon">🔧</div>
            <h3>售后完善 · 技术支持</h3>
            <p>7×24 小时客服热线 136-2251-5296；专业工程师提供气体管道设计、设备选型、安全培训、定期巡检；钢瓶、杜瓦罐、储罐租赁维护一站式服务。</p>
            <ul class="service-list">
              <li>免费技术咨询与方案设计</li>
              <li>钢瓶、储罐租赁与定期检验</li>
              <li>安全培训与应急演练</li>
            </ul>
          </div>

          <div class="service-card">
            <div class="service-icon">🎓</div>
            <h3>定制服务 · 科研合作</h3>
            <p>可定制任意组分标准气体、混合气体，提供国家二级标准物质证书；与高校、科研院所共建实验室，联合申报项目，共享检测资源。</p>
            <ul class="service-list">
              <li>标准气体定制，精度 ±1%</li>
              <li>国家 GBW 标准物质证书</li>
              <li>联合科研，设备共享</li>
            </ul>
          </div>

          <div class="service-card">
            <div class="service-icon">📄</div>
            <h3>合规资质 · 带证发货</h3>
            <p>持有《危险化学品经营许可证》《食品生产许可证》《药品生产许可证》《充装许可证》等全套资质，所有产品随货提供检测报告、合格证、SDS。</p>
            <ul class="service-list">
              <li>危险品合规运输</li>
              <li>食品级、医用级权威检测</li>
              <li>一车一单，全程可追溯</li>
            </ul>
          </div>
        </div>
      </div>
    </section>

    <section class="section">
      <div class="container">
        <h2 class="section-title">主营产品</h2>
        <div class="products-grid" id="indexPro">
          <div class="product-card" v-for="product in proList" :key="product.id">
            <img :src="'./assets/images/product/' + product.path" :alt="product.name">
            <h3>{{ product.name }}</h3>
            <p class="product-price">{{ product.price }}</p>
            <ul>
              <li v-for="(feature, index) in product.feat" :key="index">{{ feature }}</li>
            </ul>
            <div class="product-applications">
              <strong>应用场景:</strong>
              <span v-for="(app, index) in product.app" :key="index">{{ app }}<span v-if="index < product.app.length - 1">、</span></span>
            </div>
            <a :href="'product-detail.html?id=' + product.id" class="btn-small">查看详情</a>
          </div>
        </div>
        <div class="text-center margin-top-2">
          <a href="products.html" class="btn-small">查看全部产品</a>
        </div>
      </div>
    </section>

    <section class="section">
      <div class="container">
        <h2 class="section-title">最新资讯</h2>
        <div class="news-list">
          <div class="news-item">
            <div class="news-date">2024-09-28</div>
            <h3 class="news-title">公司新增 2000 吨食品级液氮储罐投入使用</h3>
            <p class="news-excerpt">随着华南地区速冻食品、预制菜产业的迅猛发展，市场对食品级液氮的需求持续增长...</p>
            <a href="news-detail.html?id=1" class="read-more">阅读全文 →</a>
          </div>
          <div class="news-item">
            <div class="news-date">2024-09-15</div>
            <h3 class="news-title">国家新标准《GB/T XXXXX-2024 高纯氢》发布</h3>
            <p class="news-excerpt">近日，国家市场监督管理总局、国家标准化管理委员会联合发布新修订的高纯氢国家标准...</p>
            <a href="news-detail.html?id=2" class="read-more">阅读全文 →</a>
          </div>
        </div>
        <div class="text-center margin-top-1">
          <a href="news.html" class="btn-small">查看全部新闻</a>
        </div>
      </div>
    </section>
  </main>

  <footer id="footer"></footer>

  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script src="assets/js/data.js"></script>
  <script>
    const { createApp, ref, onMounted } = Vue;
    
    createApp({
      setup() {
        const proList = ref([]);
        
        onMounted(() => {
          // 创建导航
          document.getElementById('header').innerHTML = createNav('index');
          document.getElementById('footer').innerHTML = createFooter();
          
          // 获取前4个产品
          proList.value = products.slice(0, 3);
        });
        
        return {
          proList
        };
      }
    }).mount('#indexPro');
  </script>
</body>
</html>